import React, { Component } from 'react';
import { connect } from 'react-redux';
import './brandIntroduction_content.scss';
import PageOne from './pages/page_one/page_one';
import PageTwo from './pages/page_two/page_two';
import PageThree from './pages/page_three/page_three';
import PageFour from './pages/page_four/page_four';
import PageFive from './pages/page_five/page_five';

class brandIntroduction_content extends Component {
    render() {
        switch (this.props.Tabkey) {
            case 1:
                return (
                    <div className="brandIntroduction_content">
                        <PageOne></PageOne>
                    </div>
                )
            case 2:
                return (
                    <div className="brandIntroduction_content">
                        <PageTwo></PageTwo>
                    </div>
                )
            case 3:
                return (
                    <div className="brandIntroduction_content">
                        <PageThree></PageThree>
                    </div>
                )
            case 4:
                return (
                    <div className="brandIntroduction_content">
                        <PageFour></PageFour>
                    </div>
                )
            case 5:
                return (
                    <div className="brandIntroduction_content">
                        <PageFive></PageFive>
                    </div>
                )
            default:
                return (
                    <div className="brandIntroduction_content">
                        <PageOne></PageOne>
                    </div>
                )
        }
    }
}

const mapStateToProps = (state) => {
    let Tabkey = state.brandIntroduction_store.index;
    return {
        Tabkey: Tabkey
    }
}

export default connect(mapStateToProps)(brandIntroduction_content)